<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>最强大脑拼王者</title>
    <script type="text/javascript">
        // 根据屏幕的宽度 来设置 html的 font-size
        // 计算 font-size
        var fontSize = window.screen.availWidth / 20;
        document.querySelector('html').style.fontSize = fontSize + 'px';
        console.log(document.documentElement.style.fontSize);
        console.log(fontSize * (636/54));
        window.onresize = function () {
            // 计算 font-size
            var fontSize = window.screen.availWidth / 20;
            document.querySelector('html').style.fontSize = fontSize + 'px';
        }
        // 跟媒体查询比 在移动端使用 没有优劣之分
        // 面试问道 媒体查询 还有 js 都回答 即可

        //translate方法也可以直接传入像素点坐标
    </script>
    <link rel="stylesheet" type="text/css" href="css/person_info.css" />
</head>
<body>
<div class="person_info">
    <div class="head"></div>
    <div class="code"></div>
    <div class="name">郑地豆</div>
    <div class="level">Lv.2</div>
    <div class="progress"></div>
    <div class="bg">
        <div class="dartboard">
            <canvas id="mycanvas"></canvas>
        </div>

        <div class="literature zi">文艺</div>
        <div class="popular zi">流行</div>
        <div class="arts zi">文科</div>
        <div class="science zi">理科</div>
        <div class="entertainment zi">娱乐</div>
        <div class="life zi">生活</div>
    </div>
    <div class="detailed">
        <div class="ID lf">
            <div class="zi">用户ID：11769358</div>
        </div>
        <div class="winnig_rate lf">
            <div class="zi">用户ID：11769358</div>
        </div>
        <div class="experience lf">
            <div class="zi">用户ID：11769358</div>
        </div>
        <div class="dan rh">
            <div class="zi">用户ID：11769358</div>
        </div>
        <div class="total rh">
            <div class="zi">用户ID：11769358</div>
        </div>
        <div class="wins rh">
            <div class="zi">用户ID：11769358</div>
        </div>
    </div>
    <div class="share">
        <div class="ico"></div>
        <div class="zi">分享到其他群，继续看排行</div>
    </div>
    <div class="tip">
        分享到FACEBOOK，可获得100 <span></span>
    </div>
</div>
</body>
</html>

<!-- 导入 zepto 使用zepto 来实现 dom元素操纵 -->
<script type="text/javascript" src="lib/zepto.js"></script>
<script type="text/javascript" src="lib/event.js"></script>
<script type="text/javascript" src="lib/fx.js"></script>
<script type="text/javascript" src="lib/touch.js"></script>
<!-- fadein toggle等 动画方法的模块 -->
<script type="text/javascript" src="lib/fx_methods.js"></script>

<script>
    //根据设计图中的canvas画布的占比进行设置
    var myCanvas = document.getElementById('mycanvas');
    var canvasWidth = Math.floor(fontSize * (636/54));
    myCanvas.setAttribute('width',canvasWidth);
    myCanvas.setAttribute('height',canvasWidth);
    var ctx = myCanvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(Math.floor(fontSize * (197/54)),Math.floor(fontSize * (250/54)));
    ctx.lineTo(Math.floor(fontSize * (636/54/2)),Math.floor(fontSize * (180/54)));
    ctx.lineTo(Math.floor(fontSize * ((320+138)/54)),Math.floor(fontSize * (239/54)));
    ctx.lineTo(Math.floor(fontSize * ((438)/54)),Math.floor(fontSize * (389/54)));
    ctx.lineTo(Math.floor(fontSize * (636/54/2)),Math.floor(fontSize * (447/54)));
    ctx.lineTo(Math.floor(fontSize * (215/54)),Math.floor(fontSize * (378/54)));
    ctx.closePath();
    ctx.strokeStyle = '#ffc000';
    ctx.fillStyle = '#ffc000';
    ctx.fill();
    ctx.stroke();
</script>